One of the beauties of style sheets is the way they help maintain consistency. In this lesson we are going to set up a number of rules to ensure that text has a consistent appearance across our site.
Usually there are two major kinds of text in a document, the main text, and headings. There are often also other pieces of information, such as the labels for images, the list of ingredients in a cookbook, and so on.
In this lesson we will restrict ourselves to the main text. In a later lesson we are going to look at how style sheets help work with more specific kinds of information on web pages.
When designing a publication (print or web based) the appearance of text is fundamentally important. I don't have much to say about that issue (though it is a very worthy, and overlooked one) here.
I'm concerned with how we use style sheets to effect the design.
In print based publications, all of the main text of a document is in the same font, while headings either share this same font, or all share a different font. An important principle is to minimize the fuss, that is the use of different fonts for their own sake.
Our first step is to create a rule that assigns a particular font (size, etc.) to the main text of a page.
Remember from the last lesson that a rule comprises a selector, and then the properties. What will be the selector for the main text? Which elements on a page are the main text? Well, usually, the text will be contained within paragraphs. So perhaps we should create a paragraph selector. But what if some of our information is in lists? Do we also have to create a list selector? Indeed, do we have to create a selector for every possible element that will contain text on our page?
Fortunately, we can avoid that tedious, and error prone procedure, because of an important feature of web pages, and style sheets, called inheritance.
If you create a rule which selects a particular type of element, and applies properties to it, then any element that is contained inside that selected element inherits many of these properties.
In this case, if we create a rule that selects the body, and sets the font, text size and so on for the body, then any element inside that body inherits these properties, regardless of whether they are a paragraph, a list item, and so on.
So we are going to use the rule we created in the last chapter, that selects the body. This time we are going to apply text properties to it.
So, in the style sheet window, select BODY in the list of statements on the left.
At this stage, the most important text properties are the font, and the size of the text. These are specified by the font-family and the font-size properties.
The font-family property specifies one or more fonts for an element, using the family name of the font. Each font name is separated by a comma. The browser will use the first font in the list that is installed on its computer.
I rather like the Verdana font, so I'll use that as my first choice. It is customary to also specify a common Macintosh font, a common Windows font, and lastly a generic font family name.
In this example, I want to specify Helvetica, Arial and sans-serif as these fonts.
First you'll need to tab to the Font Editor, by clicking the tab
The popup menu lists several groups of fonts (Font Families, Current Fonts, Web Fonts, Macintosh Fonts and Windows Fonts). The relevant list of fonts appears in the list below the popup menu when one of these groups is chosen).
To add a font to the list of fonts chosen for a statement
1. choose the group from the popup menu
2a. double click the entry in the list of fonts or
2b. click the entry in the list of fonts and click
To remove a font from the list of fonts chosen for a statement
1. click the entry for the font in the list of fonts for the statement
2. click
The order in which the fonts appear in this list is important, as this is the order of preference the browser will use when it searches for your fonts. Put the preferred font family last in the list, as I have done below.
To change the order of the fonts in the list
Select the font and drag it to its correct position.
Now it's your turn. Create a similar rule which specifies the fonts you want and apply it to the text in the body of your page. If you prefer serif fonts (like Times, or Palatino) then the final generic font family should be serif.
Size is specified using the font-size property. The size of text can be specified in a number of ways, including keywords like small and x-large, points, pixels and various typographical measurements like picas and ems.
Exactly how to specify sizes correctly is a fraught issue, due to the differences between various operating systems, and different browsers. Esteemed figures suggest relative units, such as percentages, and ems as the best unit. This is certainly something you should investigate further as you learn more about style sheets. A very valuable overview of typographical units can be found at http://css.nu/articles/typograph1-en.html.
You can also take a look at the detailed discussion of the issues associated with online text size from Tod Fahrner at Metrius (formerly Verso).
Text size is one of the text style properties, so the property is edited using the text style editor. The text size editor is in the bottom right of the Font Properties part of this window.
Set the size of the text for the BODY to 12pt.
As you use Style Master more you'll see that you set lots of different properties in similar ways.
To set a value in a property editor
1. choose the type of value in the popup menu at the right. In this case you will choose pt for points
2. enter the value in the text field. Simply type the number 12
We've added this to your rule for specifying the font family of your text, and now we have your rule for specifying the standard text for your page.
So now, the BODY has three properties, when you add these two to the one for specifying the background from the last chapter.
Time to preview again, after saving your style sheet.
Because of inheritance, the rule we just created will apply the same style to headings, as well as paragraphs, and the other elements on a page. What we want now is to specify a different appearance for headings.
Now, it is customary for all headings in a document to have a common font, but to perhaps differ in size, or weight. So, as we have just done, we want to create two properties, one for the font, and one for, say size.
First we want to create the selector for each heading. This means that we will have several rules, one for each heading level (H1, H2 and so on.) This doesn't sound all that efficient, as we want to apply the same font to each. So that we don't have to create several different heading selectors, we can create a single group, which contains each heading level. We then give this entire group the same font.
This means that if in future we want to alter the font of headings, we need only change the style sheet once, not several times.
To create a group of selectors
1. from the menu, choose
2. in the dialog box that opens, choose Selector Group from the popup menu, then click
3. the selector group editor opens
4. to add a selector to the list of those grouped, find it in the list on the left hand side, then click to select it, and click
5. to remove a selector from the list of those chosen for the group, select it, and click
6. click
Any properties added to this statement will apply to any element in the list.
The selector group for all levels of heading (H1 through H6) is?
To complete this lesson, we want to create a rule, using the above selector, and apply the same font to each heading level.
We then want to make separate rules for each heading level, assigning a different size to each level.
Answer at the end of the lesson.
Once more time to take a progress check. How's the page coming along?
In this lesson we've covered a lot really. We've seen
We've also seen how to add comments to a style sheet (did you notice?)
Next we'll look at all the wonderful things you can do with links using style sheets.
BODY {font-family: Verdana, Arial, Helvetica, sans-serif}
Your group rule should look something like this
H1, H2, H3, H4, H5, H6 {
font-family: "Minion Web", "Times New Roman", Palatino, serif
}
and the individual headings
H1 {
font-size: 130%
}
And so on.